<template>
  <el-select
    :value="value"
    filterable
    :loading="isLoading"
    value-key="code"
    clearable
    placeholder="请选择一级分类"
    @change="handleInput"
    @clear="clear"
  >
    <el-option
      v-for="item in options"
      :key="item.code"
      :label="item.name"
      :value="item"
    />
  </el-select>
</template>

<script>
import { getFirstTagsEnums } from 'dependencies/api/application'
import LoadingMixin from 'modules/mixins/section-loading'

export default {
  mixins: [LoadingMixin],
  props: {
    appType: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    prop: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      options: []
    }
  },
  watch: {
    appType: {
      handler(val) {
        if (val) {
          this.handleGetCates()
        }
      },
      immediate: true
    }
  },
  methods: {
    async handleGetCates() {
      try {
        this.loading()
        const data = await getFirstTagsEnums({
          query: {
            appType: this.appType
          }
        })
        if (data.success) {
          this.options = data.data
        }
      } catch (error) {
        this.options = []
      } finally {
        this.loaded()
      }
    },
    handleInput(value) {
      this.prop && this.$set(this.data, this.prop, value)
    },
    clear() {
      this.prop && this.$set(this.data, this.prop, undefined)
    },
    submit() {}
  }
}
</script>
